/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2017-01-20 17:57:11
 * @version $Id$
 */

(function($, window, document, undefined){

	//定义html
	var mask = '<div class="channelSelect-mask" style="display:none;"></div>';
	
	function CreateSelect(arguments){
		var length = $(".channelSelect-mask").size();
		if(!length){
			$("body").append(mask);
		}
		return new ChannelSelect(arguments);
	}
	/*
	 *  @param option 		 		Object 
	 *  @param option.dataurl    	String
	 *  @param option.type 			String POST OR GET 数据请求方式 默认为POST
	 *  @param option.boxtitle  	String 弹出框名称
	 *  @param option.pk 			String 输入框输入提取字段
	 *  @param option.maxSeletctNum String 最多选择个数 默认为5个
	 *  @param option.dataColumns   Array  循环字段，按照顺序添加，比如［"channelid", "channelName", ""］
	 */
	function ChannelSelect(selector, option){
		this.default = {
			title : '选择通道',
			type  : 'POST'
		}
		this.dataArr = []; 	//列表数据map
		this.init(arguments);
	}

	ChannelSelect.prototype = {
		init : function(arguments){
			var id = this.getID();
			this.initHtml(id);

			this.selector = arguments[0];
			this.options  = arguments[1];

			this.initEvent();
			this.loadData();
		},

		getID : function(){
			var len 	= $(".channelSelect-ctx").size();
			var id  	= "channelSelect" + len;
			this.id 	= id;
			return id;
		},
		initHtml : function(id){
			var selector = this.selector;
			$(selector).css("cursor", "pointer");
			var html = '<div class="channelSelect-ctx" id="'+ id +'" style="display:none;">' + 
							'<div class="channelSelect-title"><p></p><span class="close-channelSelect">X</span></div>' +
							'<div class="channelSelect-cont">' +
								'<div class="channelSelect-search">' +
									'<input type="text">' +
									'<button type="button">搜索</button>' +			
								'</div>' +
								'<div class="channelSelect-dataBox">' +
									'<div class="channelSelect-left">' +
										'<div class="channelSelect-thead">' +
											'<div class="channelNumber">通道号</div>' +
											'<div class="channelName">通道名称</div>' +
											'<div class="channelMark">备注</div>' +
											'<div class="channelOpera">操作</div>' +
										'</div>' +
										'<div class="channelSelect-tbody">' +
											'<table><tbody class="channel-will-select"></tbody></table>' +
										'</div>' +
									'</div>' +
									'<div class="channelSelect-clear">清除选择</div>' +
									'<div class="channelSelect-right">' +
										'<div class="channelSelect-thead">' +
											'<div class="channelNumber">通道号</div>' +
											'<div class="channelName">通道名称</div>' +
											'<div class="channelMark">备注</div>' +
											'<div class="channelOpera">操作</div>' +
										'</div>' +
										'<div class="channelSelect-tbody">' +
											'<table><tbody class="channel-selected"></tbody></table>' +
										'</div>' +
									'</div>' +
								'</div>' +
								'<div class="channelSelect-btnGroup">' + 
									'<button class="channelSelect-confirm">确定</button>' +
									'<button class="channelSelect-close">取消</button>' +
								'</div>' +
							'</div>' +
						'</div>';
			$("body").append(html);
		},
		initEvent : function(){
			var selector = this.selector;
			var id 		 = this.id;
			$(selector).click = function(){
				$("#" + id).show();
				$(".channelSelect-mask").show();
			}

			//关闭弹窗
			$("body").on('click', '.close-channelSelect', function(){
				$(".channelSelect-mask").hide();
				$(".channelSelect-ctx").hide();
			})
			$("#" + id).find(".channelSelect-close").click(function(){
				$(".channelSelect-mask").hide();
				$(".channelSelect-ctx").hide();
			})
			//确认输入完成
			$("#" + id).find(".channelSelect-confirm").click(function(){

			})
			//选择
			$("#" + id).on("click", ".channelSelect-choose", function(){
				var index = $(this).data("index");
				$(this).closest("tr").remove();
				parent.remove();
				var parent_ = $(this).closest("tr").clone();
			})
			//取消选择
			$("#" + id).on("click", ".channelSelect-choose", function(){
				
			})
			//清除所有
			$("#" + id).on("click", ".channelSelect-clear", function(){

			})
		},
		loadData : function(){
			var options = this.options,
				url 	= options.dataurl,
				type 	= options.type,
				that 	= this;
			$.ajax({
				url : url,
				type : type,
				dataType : json,
				success : function(res){
					if (!res.list) return;
					that.data = res.list;
					that.dataArr = list;
					that.paint();
				}
			})
		},
		//绘制所有列表
		paint : function(){
			var list 	 = this.data;
 			var tbody 	 = "";
			var name  	 = this.options.dataColumns;
			var id 		 = this.id;
			var that     = this;
			for(var i = 0; i < res.length; i++){
				
				tbody += '<tr data-index="'+ i +'">' + 
							'<td class="channelNumber">'+ res[name[0]] +'</td>' + 
							'<td class="channelName">'+ res[name[1]] +'</td>' + 
							'<td class="channelMark">'+ res[name[2]] +'</td>' +
							'<td class="channelOpera"><a href="javascript:;" class="channelSelect-choose">选择</a></td>' +
						'</tr>';
			}

			$("#" + id).find('.channel-will-select').html(tbody);

		},
		//绘制已选列表
		paintSelected: function(){
			var res = this.dataArr;
		}
	}

	if(window.CreateSelect === undefined || window.ChannelSelect === null){
		window.CreateSelect = ChannelSelect;
	}
})(jQuery, window, document, undefined)


